<template>
	<view class="wrapper">
		<view class="top">
			<view class="top-main">
				<view class="top-main-box" @click="handleJump('/package-purse/member/member')">
					<view class="top-main-box-name">
						<image style="margin-right: 10rpx" class="top-main-box-icon" src="/package-purse/static/images/tuiguangrenshu.png" mode="widthFix"></image>
						总推广人数
					</view>
					<view class="top-main-box-value">
						{{ info.friend_total || 0 }}
						<image class="top-main-box-icon" style="margin-left: 12rpx" src="/package-purse/static/images/you.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="top-main-box" style="margin-left: 178rpx" @click="handleJump('/package-purse/commission/commission')">
					<view class="top-main-box-name">
						<image style="margin-right: 10rpx" class="top-main-box-icon" src="/package-purse/static/images/zongjiangli.png" mode="widthFix"></image>
						总奖励
					</view>
					<view class="top-main-box-value">
						{{ info.friend_commission.toFixed(2) }}
						<image class="top-main-box-icon" style="margin-left: 12rpx" src="/package-purse/static/images/you.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="top-footer" @click="handleJump('/package-purse/member/member')">
				<view class="top-footer-left">
					<image class="top-footer-left-icon" src="/package-purse/static/images/laba.png" mode=""></image>
					您邀请团员的数据统计
				</view>
				<view class="top-footer-right">
					去查看
					<u-icon name="arrow-right" color="#FF1006" size="25rpx"></u-icon>
				</view>
			</view>
		</view>
		<view class="search">
			<view class="search-name">推广列表</view>
			<view class="search-main">
				<uni-datetime-picker v-model="datetimerange" @change="handleDateChange" type="daterange" rangeSeparator="至" />
				<u-subsection @change="sectionChange" activeColor="#999" inactiveColor="#999" :list="dataList" :current="current"></u-subsection>
			</view>
		</view>
		<view class="list">
			<view class="list-item" v-for="item in list" :key="item.id">
				<BalanceCard :item="item" @hancleExpand="hancleExpand">
					<view slot="topContent" class="list-item-income">
						收入:
						<text>{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}</text>
					</view>
					<!-- <view slot="num">{{ item.scene_text || '' }}</view> -->
					<view slot="boxInfo">
						<view class="box-info-item">
							<view class="box-info-item-label">好友昵称</view>
							<view class="box-info-item-value">{{ item.item.nickName }}</view>
						</view>
						<view class="box-info-item">
							<view class="box-info-item-label">商品名称</view>
							<view class="box-info-item-value">{{ item.item.product_name }}</view>
						</view>
						<view class="box-info-item">
							<view class="box-info-item-label">规格</view>
							<view class="box-info-item-value">{{ item.item.product_attr }}</view>
						</view>
						<view class="box-info-item">
							<view class="box-info-item-label">订单金额</view>
							<view class="box-info-item-value">{{ item.item.order_amount }}</view>
						</view>
					</view>
				</BalanceCard>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-loadmore
			:status="loadStatus"
			:line="true"
			:loading-text="loadingText"
			:loadmore-text="loadmoreText"
			:nomore-text="nomoreText"
			:error-text="errorText"
			@click-error="retryLoad"
			v-if="list.length > 0"
		/>
	</view>
</template>

<script>
import { getDateRangeByType } from '@/utils/common.js';
import BalanceCard from '@/package-purse/components/balanceCard/index.vue';
import { promotion, purse } from '@/api';
import createPageScrollLoadMixin from '@/mixins/pageScrollLoadMixin';
export default {
	components: { BalanceCard },
	mixins: [
		createPageScrollLoadMixin(
			purse.commissionBalanceLog, // 请求函数
			{
				list_rows: 20,
				resFormat: 1,
				// 为每行数据添加额外属性
				processRow: (row, index) => {
					return {
						time: row.createtime,
						...row,
						// 添加自定义属性
						isExpand: false,
						fold: row.item ? true : false
					};
				}
			} // 配置项
		)
	],
	data() {
		return {
			info: {
				friend_total: 0, //总推广人数
				friend_commission: 0 //总奖励
			},
			datetimerange: [],
			dataList: [{ name: '本日' }, { name: '本周' }, { name: '本月' }],
			current: 0,
			list: [
				{
					id: 1,
					index: 1, //排序 1开始
					isExpand: false,
					time: '2025-06-09 10:36:42',
					title: '好友在线购买手机',
					income: 50, //收入
					num: 1, //数量
					unit: '台' //单位
				},
				{
					id: 2,
					index: 2, //排序 1开始
					isExpand: false,
					time: '2025-06-09 10:36:42',
					title: '好友在线购买手机',
					income: -50, //收入
					num: 1, //数量
					unit: '台' //单位
				}
			]
		};
	},
	onLoad() {
		this.sectionChange(this.current, false);
		this.getCommissionWallet();
	},
	methods: {
		// 获取推广信息
		async getCommissionWallet() {
			const res = await promotion.promotionInfo();
			this.info = res.data;
		},
		chageQueryParams() {
			this.queryParams = {
				start_date: this.datetimerange[0] || '',
				end_date: this.datetimerange[1] || ''
			};
		},
		// 日期范围修改时触发
		handleDateChange(e) {
			this.datetimerange = e;
			this.chageQueryParams();
		},
		sectionChange(index, inspection = true) {
			if (inspection) {
				if (index === this.current) return;
			}
			this.current = index;
			switch (this.current) {
				case 0:
					this.datetimerange = getDateRangeByType('today');
					break;
				case 1:
					this.datetimerange = getDateRangeByType('week');
					break;
				case 2:
					this.datetimerange = getDateRangeByType('month');
					break;
			}
			this.chageQueryParams();
		},
		handleJump(path) {
			uni.navigateTo({
				url: path
			});
		},
		hancleExpand(item) {
			const index = this.list.findIndex((v) => v.id === item.id);
			this.list[index].isExpand = !item.isExpand;
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	padding: 20rpx 30rpx;
}
.top {
	padding: 40rpx 30rpx 0;
	height: 285rpx;
	box-sizing: border-box;
	background: linear-gradient(158deg, rgba(255, 0, 0, 0.85), rgba(250, 82, 10, 0.85));
	border-radius: 20rpx;
	&-main {
		display: flex;
		align-items: center;

		&-box {
			margin-left: 40rpx;
			&-icon {
				width: 28rpx;
				height: 28rpx;
			}
			&-name {
				display: flex;
				align-items: center;
				font-family: 'PingFang SC';
				font-weight: 400;
				font-size: 24rpx;
				color: #ffffff;
				margin-bottom: 20rpx;
			}
			&-value {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: 'PingFang SC';
				font-weight: 500;
				font-size: 48rpx;
				color: #ffffff;
			}
		}
	}
	&-footer {
		margin-top: 30rpx;
		height: 62rpx;
		background: #ffffff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		&-left {
			display: flex;
			align-items: center;
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #ff1006;
			&-icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 20rpx;
			}
		}
		&-right {
			display: flex;
			align-items: center;
			font-family: 'PingFang SC';
			font-weight: 500;
			font-size: 24rpx;
			color: #ff1006;
		}
	}
}
.search {
	background: #ffffff;
	border-radius: 10rpx;
	margin-top: 20rpx;
	&-name {
		font-family: 'PingFang SC';
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
		padding-top: 20rpx;
		padding-left: 30rpx;
	}
	&-main {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 10rpx 30rpx;

		::v-deep .uni-date {
			width: 400rpx;
			height: 60rpx;
			background: #f4f6f8;
			border-radius: 29rpx;
			opacity: 0.99;
			position: relative;
			z-index: 2;
			flex: none;
		}
		::v-deep .uni-date .icon-calendar {
			display: none;
		}
		::v-deep .uni-date .uni-icons {
			font-size: 24rpx !important;
		}
		::v-deep .uni-date-x--border {
			border: none;
		}
		::v-deep .uni-date-x {
			background-color: transparent;
			align-items: start;
		}
		::v-deep .uni-date__x-input {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
			line-height: normal;
			height: 60rpx;
			justify-content: center;
		}
		::v-deep .range-separator {
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;
			line-height: normal;
			height: 60rpx;
			justify-content: center;
		}
		::v-deep .u-subsection {
			width: 240rpx;
			height: 56rpx;
			background: #ffffff;
			border-radius: 16rpx;
			opacity: 0.99;
			position: relative;
			z-index: 1;
		}

		::v-deep .u-subsection__item__text {
			font-family: 'PingFang SC' !important;
			font-weight: 400 !important;
			font-size: 24rpx !important;
			color: #999999 !important;
		}
		::v-deep .u-subsection__bar {
			background: #fff;
			border-radius: 7rpx;
			opacity: 0.99;
		}
	}
}
.list {
	margin-top: 20rpx;
	&-item {
		margin-bottom: 20rpx;
		&-income {
			font-family: 'PingFang SC';
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			text {
				margin-left: 6rpx;
				font-family: 'PingFang SC';
				font-weight: bold;
				font-size: 30rpx;
				color: #ff4603;
			}
		}
	}
	.box-info-item {
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}
}
</style>
